import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react'
import { addressList } from '../../../../models'
import { Cell, Tag } from 'react-vant'
import { Radio } from 'react-vant';
import { Card } from 'react-vant';
import { Edit } from '@react-vant/icons';
import './addresslist.scss'

export default forwardRef(function Addresslist(props, ref) {
    const [addresslist, setAddresslist] = useState([])
    useEffect(() => {
        getAddressList()
    }, [])
    const getAddressList = () => {
        addressList(props.userId).then(res => {
            console.log(res);
            setAddresslist(res.data)
        })
    }
    const EditInfo = (item) => {
        props.Edit(item)
    }
    useImperativeHandle(ref, () => {
        return {
            addresslist,
            getAddressList,
        }
    })

    return (
        <div>
            <Radio.Group defaultValue={addresslist[1]?.addressid}>
                {addresslist.map((item) => (
                    <Card round style={{ margin: '10px' }} key={item.addressid}>
                        <Card.Body>
                            <Radio name={item.addressid} style={{ width: '100%' }}>
                                <Cell
                                    center
                                    title={item.name + `  ` + item.tel}
                                    label={item.province + item.city + item.county + item.addressDetail}
                                    extra={<div onClick={() => EditInfo(item)} style={{ width: '50px', textAlign: 'center', fontSize: '20px' }}><Edit /></div>}
                                />
                                {item.isDefault && <Tag className='isdefault' round type="danger">默认</Tag>}
                            </Radio>
                        </Card.Body>
                    </Card>
                ))}
            </Radio.Group>
        </div>
    )
})
